<template>
  <view class="login">
    <image
      src="https://diancan-1252107261.cos.accelerate.myqcloud.com/yiliao/denglu-yemian.jpg"
    ></image>
    <view class="login-button">
      <button @click="loginSuccess">授权登录</button>
      <label>
        <checkbox @click="checked = !checked" :checked="checked"
          >勾选即代表同意《用户协议》</checkbox
        >
      </label>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { WxLoginT, loginResT } from "../../types/type";
import { api } from "../../api/api";
const checked = ref(false);
const loginSuccess = () => {
  if (checked.value == true) {
    uni.getUserProfile({
      desc: "用于小程序登录",
      success: (res) => {
        console.log(res);
        uni.login({
          success: (loginRes) => {
            console.log(loginRes);
            let obj = {
              code: loginRes.code,
              avatarUrl: res.userInfo.avatarUrl,
              nickName: res.userInfo.nickName,
              appid: "wxab63ad0c2b41609a",
              secret: "209f3cccf5dc664ad974afca01cb314b",
            };
            loginOK(obj);
          },
        });
      },
    });
  }
};
async function loginOK(obj: WxLoginT) {
  const res: any = await api.login(obj);
  console.log(res);
  // 存储token
  uni.setStorageSync("token", res.data.user_Token);
  // 存储个人信息
  uni.setStorageSync("userInfo", res.data);
  setTimeout(() => {
    uni.navigateBack()
  },600)
}
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 100vh;
  position: relative;
  image {
    width: 100%;
    height: 100%;
  }
  .login-button {
    width: 500rpx;
    text-align: center;
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-40%, -50%);
    button {
      width: 250rpx;
      background-color: #2c76ef;
      color: #fff;
    }
  }
}
</style>
